<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:replace="inc/header"></header>

<body th:with="menu='rollcall'">
	<nav th:replace="inc/nav"></nav>
	<style>
		.treeview ul.list-group,
		.treeview0 ul.list-group {
			position: absolute;
			left: 80px;
			top: -5px;
			min-width: 100px;
		}

		.treeview ul li.list-group-item,
		.treeview0 ul li.list-group-item {
			/* height:30px; */
			line-height: 30px;
			padding: 0 15px;
			cursor: pointer;
			min-width: 100px;
		}

		.iscard .card-list a {
			line-height: 2;
		}

		.search-title .dropdown-menu .divider {
			margin: 0;
		}

		.treeviewpublic .list-group {
			max-height: 600px;
			overflow: auto;
		}
	</style>
	<div class="container-fluid">
		<div class="row">
			<div th:replace="inc/sidebar"></div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h1 class="page-header">
					点名记录查询
				</h1>
				<div class=" col-md-12 search-title">
					<div class="col-md-11">
						<div class="col-md-2" style="display:none;">
							<span class="font-weight">监所编号：</span><span class="rollcall-jsbh" th:text="${jsbh}"></span>
						</div>

						<div id="treeview1" class="treeview treeviewpublic col-md-3" style="margin-top:4px;">
							<span class="font-weight">选择监室：</span>
							<ul class="list-group">
								<li class="list-group-item node-treeview1" data-nodeid="0" style="color:undefined;background-color:undefined;">
									请选择
								</li>
							</ul>
						</div>
						<div class="col-md-2">
							<span class="font-weight">是否刷卡：</span>
							<div class="btn-group iscard">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    <span class="card-text">全部</span> <span class="caret"></span>
				  </button>
								<ul class="dropdown-menu">
									<li class="card-no card-list"><a href="#">全部</a></li>
									<li role="separator" class="divider"></li>
									<li class="card-yes card-list" card="true"><a href="#">是</a></li>
									<li role="separator" class="divider"></li>
									<li class="card-no card-list" card="false"><a href="#">否</a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-3">
							<span class="font-weight">开始时间：</span><input type="text" name="datetime" class="ui_timepicker rollcall-start-time"
							 value="">
						</div>
						<div class="col-md-3">
							<span class="font-weight">结束时间：</span><input type="text" name="datetime" class="ui_timepicker rollcall-end-time" value="">
						</div>
					</div>

					<div class="col-md-1 tableexportaddbtn">
						<a class="btn btn-primary btn-sm" id="btnSearch">查询</a>
					</div>
				</div>
				<table class="table table-striped searchList exportbtn">
					<thead>
						<tr>
							<th>监室号</th>
							<th>姓名</th>
							<!-- <th>是否刷卡</th> -->
							<th>刷卡时间</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
	</div>



	<div th:replace="inc/footer"></div>
	<div th:replace="inc/footer1"></div>
	<script th:inline="javascript">
		$(function () {
			$(".ui_timepicker").datetimepicker({
				showSecond: true,
				timeFormat: 'hh:mm:ss',
				stepHour: 1,
				stepMinute: 1,
				stepSecond: 1
			});
			$(".rollcall-start-time").val(nowDate());
			$(".rollcall-end-time").val(nowTime());
			//第一个监室号
			$(".treeview").on("click", ".node-treeview1", function () {
				$(".treeview ul").html('<li class="list-group-item node-treeview1 node-treeview0">请选择</li>');
				$.ajax({
					url: "/dormArea/findAll",
					async: false,
					success: function (result) {
						for (var i = 0; i < result.length; i++) {
							$(".treeview ul").append('<li class="list-group-item node-treeview2" areacode="' + result[i].id + '" style="padding-left:30px;">' + result[i].areaname + '</li>')
						}
					}
				});
				return false;
			});
			$(".treeview").on("click", ".node-treeview2", function () {
				$(".treeview ul li").remove(".node-treeview3");
				var $this = $(this);
				var areacode = $this.attr('areacode');

				$.ajax({
					url: "/dorm/findByAreacode?areacode=" + areacode,
					async: false,
					success: function (result) {
						for (var i = result.length - 1; i >= 0; i--) {
							$this.after('<li class="list-group-item node-treeview3" dormcode="' + result[i].dormcode + '" style="padding-left:50px;">' + result[i].dormname + '</li>')
						}
					}
				});
				return false;
			});
			$(".treeview").on("click", ".node-treeview3", function () {
				var dormname = $(this).text();
				var dormcode = $(this).attr("dormcode");
				$(".treeview ul").html('<li class="list-group-item node-treeview1" dormcode="' + dormcode + '">' + dormname + '</li>')
				return false;
			})
			var meetingcard1 = "";
			//点击是否刷卡
			$(".iscard").on("click", ".card-list", function () {
				var meetingcard = $(this).find("a").text();
				if ($(this).attr("card")) {
					meetingcard1 = "&swipe=" + $(this).attr("card");
				} else {
					meetingcard1 = "";
				}

				$(".iscard .card-text").text(meetingcard);
			});

			//$(".exportbtn").tableExport({formats:["xlsx"],ignoreCols:6})
			$("#btnSearch").on("click", function () {
				btnSearchFn();
			});
			btnSearchFn();
			function btnSearchFn() {
				var rollcalljsbh = $(".rollcall-jsbh").text();
				var rollcalljsbh = $(".rollcall-jsbh").text();

				var rollcalljsh1 = $(".treeview .node-treeview1").attr("dormcode");
				if (rollcalljsh1) {
					rollcalljsh1 = "&jshs=" + rollcalljsh1;
				} else {
					rollcalljsh1 = "";
				}
				var startTime = $(".rollcall-start-time").val();
				var endTime = $(".rollcall-end-time").val();
				startTime = startTime ? "&startTime=" + startTime : "";
				endTime = endTime ? "&endTime=" + endTime : "";
				var searchUrl = "/swipe/rollcallResult?jsbh=" + rollcalljsbh + rollcalljsh1 + startTime + endTime + meetingcard1;
				$.ajax({
					url: searchUrl,
					success: function (result) {
						console.log(result)
						$(".searchList tbody").html('');
						for (var i = 0; i < result.length; i++) {
							var swipe = result[i].swipe;
							var swipeTime = result[i].swipeTime;
							if (swipeTime != null) {
								swipeTime = changeTime(swipeTime)
							} else {
								swipeTime = "未刷卡";
							}
							if (swipe == true) {
								swipe = '是';
							} else {
								swipe = '否';
							}
							//<td>'+swipe+'</td>
							$(".searchList tbody").append('<tr><td>' + result[i].jsh + '</td><td>' + result[i].prisonerName + '</td><td>' + swipeTime + '</td></tr>')

						}
					}
				})
				//$("caption").remove();
				//$(".exportbtn").tableExport({formats:["xlsx"]})
				return false;
			}
			//点击页面隐藏下拉菜单
			$("html").on("click", function () {
				if (($(".treeview ul li").length) != 1) {
					$(".treeview ul").html('<li class="list-group-item node-treeview1 node-treeview0">请选择</li>');
				}
			});


			function nowDate() {
				var myDate = new Date();
				var y = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
				var m = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
				m = m > 9 ? m : "0" + m;
				var d = myDate.getDate();        //获取当前日(1-31)
				d = d > 9 ? d : "0" + d;
				var date = y + "-" + m + "-" + d + " 00:00:00";
				return date;
			}

			function nowTime() {
				var myDate = new Date();
				var y = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
				var m = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
				m = m > 9 ? m : "0" + m;
				var d = myDate.getDate();        //获取当前日(1-31)
				d = d > 9 ? d : "0" + d;
				var h = myDate.getHours();       //获取当前小时数(0-23)
				h = h > 9 ? h : "0" + h;
				var ms = myDate.getMinutes();     //获取当前分钟数(0-59)
				ms = ms > 9 ? ms : "0" + ms;
				var s = myDate.getSeconds();     //获取当前秒数(0-59)
				s = s > 9 ? s : "0" + s;
				var time = y + "-" + m + "-" + d + " " + h + ":" + ms + ":" + s;
				return time;
			}
			function changeTime(time) {
				var d = new Date(time);
				var mm = (d.getMonth() + 1) > 9 ? (d.getMonth() + 1) : "0" + (d.getMonth() + 1);
				var dd = (d.getDate()) > 9 ? (d.getDate()) : "0" + (d.getDate());
				var hh = (d.getHours()) > 9 ? (d.getHours()) : "0" + (d.getHours());
				var ms = (d.getMinutes()) > 9 ? (d.getMinutes()) : "0" + (d.getMinutes());
				var ss = (d.getSeconds()) > 9 ? (d.getSeconds()) : "0" + (d.getSeconds());
				var times = d.getFullYear() + '-' + mm + '-' + dd + ' ' + hh + ':' + ms + ':' + ss;
				return times;
			}

		})
	</script>
</body>

</html>